<!DOCTYPE html>
<html>
<head>
    <title>订阅live_flight_path频道</title>
    <meta charset="utf-8" />
    <style>
        body {
            background-color: skyblue; /* 设置背景颜色为天蓝色 */
            font-family: Arial, sans-serif;
        }
        #flight-data {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
<h1>订阅live_flight_path频道</h1>
<div id="flight-data"></div>

<script>
    // 注意：由于网络原因，以下链接可能无法正常加载
    // 如果无法加载，请检查网络连接或尝试其他CDN链接
    // 例如：https://cdn.jsdelivr.net/npm/socket.io-client@4.0.1/dist/socket.io.js
    const socket = new WebSocket('ws://localhost:8004/websocket/live');

    socket.onopen = () => {
        console.log('Connected to WebSocket server');
    };

    socket.onmessage = (event) => {
        try {
            const data = JSON.parse(event.data);
            console.log(data);
            //是用来获取页面中用于显示航迹数据的 div 元素的引用，以便在接收到新的航迹数据时更新页面内容。
            const flightData = document.getElementById('flight-data');
            flightData.innerHTML = `
            <p>ICAO: ${data.icaoCode}</p>
            <p>Timestamp: ${data.timestamp}</p>
            <p>Latitude: ${data.latitude}</p>
            <p>Longitude: ${data.longitude}</p>
            <p>Altitude: ${data.altitude}</p>
            <p>Speed: ${data.speed}</p>
            <p>Heading: ${data.heading}</p>
            <p>Source Type: ${data.sourceType}</p>
            <hr>
            ${flightData.innerHTML}
        `;
        } catch (e) {
            console.error('Error parsing message:', e);
        }
    };

    socket.onclose = () => {
        console.log('Disconnected from WebSocket server');
    };

    socket.onerror = (error) => {
        console.error('WebSocket error:', error);
    };
</script>
</body>
</html>